<!DOCTYPE html>
<html>
  <head>
    <title>Mapa de puntos</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link href="<?php echo base_url(); ?>css/bootstrap.css" rel="stylesheet">
    <link href="<?php echo base_url(); ?>css/style.css" rel="stylesheet">
    <script src="<?php echo base_url(); ?>js/jquery.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Alef' rel='stylesheet' type='text/css'>
    <style>
      html, body, #map-canvas {
        font-family: Alef;  
        margin: 0;
        padding: 0;
        height: 100%;
      }
      #logo{
          width:20%;
          position:absolute;
          top:0px;
          left:0px;
          border:none;
          padding: 20px;
          z-index: 1;
      }
      #nodatos{
          width:20%;
          position:absolute;
          top:0px;
          left:0px;
          border:none;
          padding: 20px;
          z-index: 1;
          
      }
      
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>    
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.12/src/infobox.js"></script>

    
    <script type="text/javascript">
    var gets = "<?php echo $_GET['id']; ?>";
    var ids = gets.split(',');
    var dirs = "<?php		
                    $idsArray = explode(',', $_GET['id']);
                    foreach ($idsArray as $id) {
                        $sql = 'SELECT latitude,longitude FROM datosge
                                WHERE iddato = (select max(iddato) from datosge WHERE iddispositivo = ?)';
                        $query = $this->db->query($sql,array($id));
                        $num_rows = $query->num_rows($query);
                        if($num_rows!=0){
                            $resp = $query->row_array();
                            $parametros=array();
                            $parametros['latitude']=$resp['latitude'];
                            $parametros['longitud']=$resp['longitude'];
                            $client = new SoapClient('http://148.213.1.38:8085/service.asmx?WSDL', $parametros);
                            $result = $client->__soapCall("GetAddress", array($parametros));
                            echo $result->GetAddressResult.'|';
                        }else echo "error".'|';
                     }
                ?>"
    var direcciones = dirs.split('|');
    var map;
    var markers = new Array();
    var infoWindow;
    function initialize() {
        var mapOptions = {
	    zoom: 11,
            disableDefaultUI: true,
	    center: new google.maps.LatLng(19.240312,-103.726088),//colima,colima
	    mapTypeId: google.maps.MapTypeId.ROADMAP
	  };
	map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
	google.maps.event.addListener(map, 'click', function(event) {
        if (infoWindow) 
            infoWindow.close();
        });
        for(var i=0;i<ids.length;i++){
            (function(i){
		$.getJSON('dispositivos/get_geodata',{id: ids[i]},function(resp){
			var boxText = document.createElement("div");
      			boxText.style.cssText =  "margin-top:8px; background: #696969; border-radius:10px; padding: 5px; color:#000;";
     			boxText.innerHTML = '<div class="well">'+
                                                '<table style="width:100%">'+
                                                    '<thead>'+
                                                        '<tr class="btn-info">'+
                                                            '<td colspan="2"><center>'+resp['asignadoa']+'</center></td>'+
                                                        '</tr>'+
                                                    '</thead>'+
                                                    '<tbody>'+
                                                        '<tr><td><b>Codigo:</b></td><td style="padding-left:15px;">'+ resp['codigo'] + '</td></tr>' +
                                                        '<tr><td><b>Fecha:</b></td><td style="padding-left:15px;">'+ resp['fecha'] + '</td></tr>'+
                                                        '<tr><td><b>Dirección:</b></td><td style="padding-left:15px;">'+ direcciones[i] + '</td></tr>' +
                                                    '</tbody>'+
                                                 '</table>'+
                                            '</div>';
						
                var myOptions = {
                     content: boxText
                    ,disableAutoPan: false
                    ,maxWidth: 0
                    ,pixelOffset: new google.maps.Size(-140, 0)
                    ,zIndex: null
                    ,boxStyle: { 
                      background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                      opacity: 1
                      ,width: "400px"
                     }
                    ,closeBoxMargin: "10px 10px 10px 10px"
                    ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                    ,infoBoxClearance: new google.maps.Size(1, 1)
                    ,isHidden: false
                    ,pane: "floatPane"
                    ,enableEventPropagation: false
                };
	        var infowindow = new InfoBox(myOptions);
                var iconBase='<?php echo base_url()?>/img/pines/';
	        var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(resp['latitude'],resp['longitude']),
                    map: map,
                    icon: iconBase+ 'pin1'+i+'.png',
                    title: resp['asignadoa']});
                    google.maps.event.addListener(marker, 'click', function() {
                        if(infoWindow)
                        infoWindow.close();
                        infoWindow = infowindow;
                        infoWindow.open(map,marker);
                    });
                    markers.push(marker);
                    if(direcciones[i]!=="error")
                        map.setCenter(new google.maps.LatLng(resp['latitude'],resp['longitude']));
               });
	      })(i);
              
            }
               if(direcciones[0] !== "error"){
                    $('#nodatos').addClass('ocultar');
                }
                else{
                  $('#logo').addClass('ocultar');
                } 
	}
        google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  </head>
  <body>
          <?php echo var_dump($puntos)?>
          <div id="nodatos">
            <img src="<?php echo base_url()?>/img/nodatos.png" />
          </div>
          <div id="logo" class="pull-left" >
                <img src="<?php echo base_url()?>/img/POSMobile.png" style="opacity:0.4;"/>
          </div>
          <div id="map-canvas"></div>
  </body>
   
</html>